<template>
    <div class="search-div">
        <div class="search-logo animated fadeInUp"><Icon type="md-search" color="white" size="30" /></div>
        <Input search :enter-button="enterButton" :placeholder="placeholder" class="search animated fadeInUp"
            size="large" v-model="key" @on-search="search()" />
    </div>
</template>

<script>
export default {
    props:["searchKey","enterButton","placeholder"],
    data(){
        return{
          key:this.searchKey
        }
    },
    watch:{
        key(value){
            this.$emit("update:searchKey",value);
        },
        searchKey(value){ 
            this.key = value;
        }
    },
    methods:{
        search(){
            this.$emit("search");
        }
    }
}
</script>
<style lang="scss" scoped>
.search-div {
    padding-top: 120px;
    background: linear-gradient(-150deg, #1c4f48, #28354b);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 150px;
    .search-logo{
        height: 50px;
        width: 70px;
        background: var(--single-color);
        border:1px solid #fff;
    }
    /deep/ .ivu-icon-md-search{
        margin-top: 10px;
    }
}   
.search {
    width: 60%;

    /deep/ input {
        border-radius: 0;
        font-size: 15px;
        border: 1px solid white !important;
        height: 50px;
    }

    /deep/ .ivu-input-search {
        border-radius: 0;
        background: var(--single-color) !important;
        border: 1px solid white !important;
        outline: none;
        overflow: hidden;
    }
}
@media (max-width:1060px) {
    /deep/ .ivu-input-search{
        display: none;
    }
    /deep/ input {
        font-size: 13px !important;
    }
    .search {
        width: 80%;
        /deep/ input {
            height: 40px;
            font-size: 14px;
        }
    }
    /deep/ .ivu-input-search {
        font-size: 13px !important;
    }
    .search-div{
        .search-logo{
            height: 40px;
            width: 40px;
        }
        /deep/ .ivu-icon-md-search{
            margin-top: 7px;
            font-size: 25px !important;
        }
    }
}
</style>